<template lang="pug">
  v-dialog(v-model="active" scrollable max-width="400px" persistent)
    v-card
      v-card-title
        v-text-field(prepend-inner-icon="search" placeholder="搜索资产" hide-details v-model="query" clearable :loading="showLoading")
      v-divider
      v-card-text.px-2(style="height: 400px;")
        v-list(subheader)
          v-subheader 一般资产
          v-list-item-group(multiple v-model="selectAssets" active-class="primary")
            v-list-item(v-for="item in availableAssets")
              template(v-slot:default="{ active }")
                v-list-item-action
                  v-checkbox(v-model="active")
                v-list-item-content
                  v-list-item-title {{item.name}}
          v-divider
          v-subheader 批量资产
          v-list-item-group(multiple v-model="selectAssetStocks" active-class="primary")
            v-list-item(v-for="item in availableAssetStocks")
              template(v-slot:default="{ active }")
                v-list-item-action
                  v-checkbox(v-model="active")
                v-list-item-content
                  v-list-item-title {{item.name}}


      v-card-actions
        v-spacer
        v-btn(text @click="cancel") 取消
        v-btn(text color="primary" @click="confirm") 选择
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import _ from 'lodash'
  import {mapActions} from 'vuex'
  import {AxiosPromise, AxiosResponse} from 'axios'
  const ASSET_KEY="App\\Models\\Asset"
  const ASSETSTOCK_KEY="App\\Models\\AssetStock"

  export default (Vue as VueConstructor<Vue & {
    queryAssets: (s: string)=> AxiosPromise
    addAsset: (o: any) => AxiosPromise
  }>).extend({
    props: ["bundle"],
    methods: {
      ...mapActions("assetBundle", ['queryAssets', "addAsset"]),
      toggle() {
        this.active = !this.active
      },
      convertIds (){
        let assetIds = _.map(this.selectAssets, (idx)=>{
          return {
            id: this.availableAssets[idx].id,
            type: ASSET_KEY
          }
        })
        let assetStockIds = _.map(this.selectAssetStocks, (idx)=>{
          return {
            id: this.availableAssetStocks[idx].id,
            type: ASSETSTOCK_KEY
          }
        })
        return assetIds.concat(assetStockIds)
      },
      confirm() {
        let data = {
          id: this.bundle.id,
          data: {data: this.convertIds()}
        }
        this.addAsset(data).then((response: AxiosResponse)=>{
          this.$emit("refreshAsset")
        }).finally(this.cancel)
      },
      doQuery(){
        if (this.query === "") {
          return
        }
        this.showLoading = true
        this.reset()
        this.queryAssets(this.query).then((response: AxiosResponse)=> {
          this.availableAssets = response.data.data[ASSET_KEY]
          this.availableAssetStocks = response.data.data[ASSETSTOCK_KEY]
        }).finally(()=>{
          this.showLoading = false
        })
      },
      reset(){
        this.availableAssets = []
        this.availableAssetStocks = []
        this.selectAssets = []
        this.selectAssetStocks =[]
      },
      cancel() {
        this.active = false
        this.query = ""
        this.reset()
      }
    },
    watch: {
      query: _.debounce(function (val) {
        this.doQuery()
      }, 800)
    },
    data() {
      return {
        showLoading: false,
        query: '',
        active: false,
        title: '添加资产',
        availableAssets: [],
        availableAssetStocks: [],
        selectAssets: [],
        selectAssetStocks:[]
      }
    }
  })
</script>
